<div id="div_view_options" class="container">
  <h2>{{ t('Display chart') }}</h2>

  <div class="card">
    <div class="card-body">
      <form method="post" id="tblchartform" action="{{ url('/table/chart') }}" class="ajax">
        {{ get_hidden_inputs(url_params) }}

        <fieldset class="mb-3" role="radiogroup">
          <legend class="visually-hidden">{{ t('Chart type') }}</legend>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="chartType" value="bar" id="barChartTypeRadio">
            <label class="form-check-label" for="barChartTypeRadio">{{ t('Bar', context = 'Chart type') }}</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="chartType" value="column" id="columnChartTypeRadio">
            <label class="form-check-label" for="columnChartTypeRadio">{{ t('Column', context = 'Chart type') }}</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="chartType" value="line" id="lineChartTypeRadio" checked>
            <label class="form-check-label" for="lineChartTypeRadio">{{ t('Line', context = 'Chart type') }}</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="chartType" value="spline" id="splineChartTypeRadio">
            <label class="form-check-label" for="splineChartTypeRadio">{{ t('Spline', context = 'Chart type') }}</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="chartType" value="area" id="areaChartTypeRadio">
            <label class="form-check-label" for="areaChartTypeRadio">{{ t('Area', context = 'Chart type') }}</label>
          </div>
          <div class="form-check form-check-inline d-none" id="pieChartType">
            <input class="form-check-input" type="radio" name="chartType" value="pie" id="pieChartTypeRadio">
            <label class="form-check-label" for="pieChartTypeRadio">{{ t('Pie', context = 'Chart type') }}</label>
          </div>
          <div class="form-check form-check-inline d-none" id="timelineChartType">
            <input class="form-check-input" type="radio" name="chartType" value="timeline" id="timelineChartTypeRadio">
            <label class="form-check-label" for="timelineChartTypeRadio">{{ t('Timeline', context = 'Chart type') }}</label>
          </div>
          <div class="form-check form-check-inline d-none" id="scatterChartType">
            <input class="form-check-input" type="radio" name="chartType" value="scatter" id="scatterChartTypeRadio">
            <label class="form-check-label" for="scatterChartTypeRadio">{{ t('Scatter', context = 'Chart type') }}</label>
          </div>
        </fieldset>

        <div class="form-check mb-3 d-none" id="barStacked">
          <input class="form-check-input" type="checkbox" name="barStackedCheckbox" value="1" id="barStackedCheckbox">
          <label class="form-check-label" for="barStackedCheckbox">{{ t('Stacked') }}</label>
        </div>

        <div class="mb-3">
          <label class="form-label" for="chartTitleInput">{{ t('Chart title:') }}</label>
          <input class="form-control" type="text" name="chartTitleInput" id="chartTitleInput">
        </div>

        {% set xaxis = null %}
        <div class="mb-3">
          <label class="form-label" for="chartXAxisSelect">{{ t('X-Axis:') }}</label>
          <select class="form-select" name="chartXAxisSelect" id="chartXAxisSelect">
            {% for idx, key in keys %}
              {% if xaxis is same as(null) %}
                {% set xaxis = idx %}
              {% endif %}
              {% if xaxis is same as(idx) %}
                <option value="{{ idx }}" selected>{{ key }}</option>
              {% else %}
                <option value="{{ idx }}">{{ key }}</option>
              {% endif %}
            {% endfor %}
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label" for="chartSeriesSelect">{{ t('Series:') }}</label>
          <select class="form-select resize-vertical" name="chartSeriesSelect" id="chartSeriesSelect" multiple>
            {% for idx, key in keys %}
              {% if fields_meta[idx].isNumeric %}
                {% if idx == xaxis and table_has_a_numeric_column %}
                  <option value="{{ idx }}">{{ key }}</option>
                {% else %}
                  <option value="{{ idx }}" selected>{{ key }}</option>
                {% endif %}
              {% endif %}
            {% endfor %}
          </select>
        </div>

        <input type="hidden" name="dateTimeCols" value="
          {%- for idx, key in keys -%}
            {%- if fields_meta[idx].isDateTimeType() -%}
              {{- idx ~ ' ' -}}
            {%- endif -%}
          {%- endfor %}">
        <input type="hidden" name="numericCols" value="
          {%- for idx, key in keys -%}
            {%- if fields_meta[idx].isNumeric -%}
              {{- idx ~ ' ' -}}
            {%- endif -%}
          {%- endfor %}">

        <div class="mb-3">
          <label class="form-label" for="xAxisLabelInput">{{ t('X-Axis label:') }}</label>
          <input class="form-control" type="text" name="xAxisLabelInput" id="xAxisLabelInput" value="{{ xaxis == -1 ? t('X Values') : keys[xaxis] }}">
        </div>

        <div class="mb-3">
          <label class="form-label" for="yAxisLabelInput">{{ t('Y-Axis label:') }}</label>
          <input class="form-control" type="text" name="yAxisLabelInput" id="yAxisLabelInput" value="{{ t('Y Values') }}">
        </div>

        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" id="seriesColumnCheckbox" name="seriesColumnCheckbox" value="1">
          <label class="form-check-label" for="seriesColumnCheckbox">{{ t('Series names are in a column') }}</label>
        </div>

        <div class="mb-3">
          <label class="form-label" for="chartSeriesColumnSelect">{{ t('Series column:') }}</label>
          <select class="form-select" name="chartSeriesColumnSelect" id="chartSeriesColumnSelect" disabled>
            {% for idx, key in keys %}
              <option value="{{ idx }}"{{ idx == 1 ? ' selected' }}>{{ key }}</option>
              {% set series_column = idx %}
            {% endfor %}
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label" for="chartValueColumnSelect">{{ t('Value Column:') }}</label>
          <select class="form-select" name="chartValueColumnSelect" id="chartValueColumnSelect" disabled>
            {% set selected = false %}
            {% for idx, key in keys %}
              {% if fields_meta[idx].isNumeric %}
                {% if not selected and idx != xaxis and series_column is defined and idx != series_column %}
                  <option value="{{ idx }}" selected>{{ key }}</option>
                  {% set selected = true %}
                {% else %}
                  <option value="{{ idx }}">{{ key }}</option>
                {% endif %}
              {% endif %}
            {% endfor %}
          </select>
        </div>

        {{ include('table/start_and_number_of_rows_fieldset.twig', start_and_number_of_rows_fieldset) }}

        <div id="resizer" class="mt-3">
          <canvas id="queryChartCanvas" aria-label="{{ t('The generated chart') }}" role="img"></canvas>
          <div class="position-absolute top-0 end-0 mt-1 me-1">
            <a class="disableAjax btn btn-sm btn-outline-secondary" id="saveChart" href="#" download="chart.png">
              {{ get_image('b_saveimage', t('Save chart as image')) }}
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
